<template>
<div id="container">
  <el-row>
    <el-col :span="20">
      <el-descriptions class="margin-top" title="支出详情" :column="3" :size="size" border>
        <template slot="extra">
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-warning-outline"></i>
            流水号
          </template>
          {{ currentExpenseInfo.expensesId }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-date"></i>
            支出日期
          </template>
          {{ currentExpenseInfo.expensesTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-money"></i>
            支出金额
          </template>
          {{ currentExpenseInfo.expensesNum }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-data-line"></i>
            支出分类
          </template>
          {{ currentExpenseInfo.expensesSort }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-info"></i>
            用户编号
          </template>
          {{ currentExpenseInfo.expensesUserId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-bank-card"></i>
            姓名
          </template>
          {{ currentExpenseInfo.expensesUser }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-edit-outline"></i>
            备注
          </template>
          {{ currentExpenseInfo.expensesRemark }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-picture-outline"></i>
            凭证
          </template>
          <el-button type="default" v-show="currentExpenseInfo.voucherUrl" size="mini" @click="showVoucherImage(currentExpenseInfo.voucherUrl)">点击查看</el-button>
        </el-descriptions-item>
      </el-descriptions>
    </el-col>
  </el-row>
</div>
</template>

<script>
export default {
  name: "details",
  data(){
    return{
      currentExpenseInfo:{}
    }
  },
  mounted() {
    this.initCurrentExpenseInfo();
  },
  methods:{
    initCurrentExpenseInfo(){
       this.$store.dispatch('queryUserExpenseDetailsInfo', this.$route.query.id).then(resp=>{
         if(resp.code === 200){
           this.currentExpenseInfo = resp.data;
         }
       })
    },
    showVoucherImage(url){
      window.open(url)
    }
  }
}
</script>

<style scoped>
#container {
  margin: 20px 20px;
  padding-right: 20px;
}

.demo-form-inline {
  text-align: center;
}
</style>
